<template>
  <!-- 批量修改商品组件 -->
  <div class="margin-container-list">
    <div class="flex">
      <div style="flex: 2">
        <div style="font-weight: bold;text-align: center;padding: 5px 0;">
          <span>符合条件的订单</span>
          <br>
          <span class="font-red">【待发货】且【未生成】</span>
        </div>
        <div class="scroll-layer-box" style="height: 545px">
          <div class="v-align-c mar-b-5" :class="index == 0 ? 'first-line' : ''" v-for="(item, index) in thirdOrderList" :key="index">
            <img class="width-16 height-16" :src="constant.platformIconObj[item.platformType]"/>
            <span class="mar-l-6 line-1" :title="item.externalOrderNo">{{ item.externalOrderNo }}</span>
          </div>
        </div>
      </div>

      <el-divider direction="vertical" style="height: auto;"></el-divider>

      <!-- 内容列表 -->
      <div class="table-container" style="flex: 7">
        <el-table :data="subOrderList" ref='table' @selection-change="handleSelectionChange" v-loading="listLoading" element-loading-text="加载中" height="600">
          <el-table-column width="45px" type="selection"></el-table-column>
          <el-table-column width="80px" label="所属订单" align="center">
            <template slot-scope="scope">
              <el-tooltip placement="top" effect="light">
                <div slot="content" class="scroll-layer-box pad-r-10" style="max-height: 300px; height: auto;">
                  <div v-for="(item, index) in scope.row.externalOrderNos" :key="index" class="mar-b-5"><span>{{ item }}</span></div>
                </div>
                <el-button type="text" icon="el-icon-connection font-24 font-black"></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="平台订单中的商品">
            <template slot-scope="scope">
              <div class="line-2 mar-b-5">{{ scope.row.productName }}</div>
              <div class="font-blue" v-if="scope.row.productSkuDetail">规格：{{ scope.row.productSkuDetail }}</div>
            </template>
          </el-table-column>
          <el-table-column width="100px" label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="medium" @click="doSelect(scope.row)">选择商品</el-button>
              <br>
              <el-button type="text" size="medium" @click="doClear(scope.row)">清空所选</el-button>
            </template>
          </el-table-column>
          <el-table-column label="修改后的商品" :filters="[{ text: '已修改', value: true }, { text: '未修改', value: false }]" :filter-method="filterTag">
            <template slot-scope="scope">
              <div class="line-2 mar-b-5">{{ scope.row.goodsTitle }}</div>
              <div class="font-blue" v-if="scope.row.skuDetail">规格：{{ scope.row.skuDetail }}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 统计块 -->
    <div class="mar-t-10">
      <span>符合条件的订单共</span>
      <span class="font-green font-w">{{ thirdOrderList.length }}</span>
      <span>笔，其中包含</span>
      <span class="font-green font-w">{{ subOrderList.length }}</span>
      <span>种商品，当前已修改</span>
      <span class="font-red font-w">{{ changeCount }}</span>
      <span>种</span>
    </div>

    <!-- 底部按钮 -->
    <div slot="footer" class="dialog-footer mar-t-20 mar-b-10">
      <el-button @click="doClose">取消</el-button>
      <el-button type="primary" :disabled="multipleSelection.length == 0" @click="doBatchSelect()">选择商品</el-button>
      <el-button type="primary" @click="doConfirm">确定</el-button>
    </div>

    <!-- 选择商品dialog -->
    <el-dialog width="1000px" title="选择商品" :visible.sync="selectSkuVisible" append-to-body>
      <select-goods-sku :showFlag="selectSkuVisible" :skuFlag="1" @callback="doCallbackSelect">
      </select-goods-sku>
    </el-dialog>

  </div>
</template>

<script>
  import { checkAndGetChangeList } from '@/api/goods/thirdSubOrder'
  import selectGoodsSku from '@/views/goods/order/components/select-goods-sku'

  export default {
    components: {
      selectGoodsSku
    },
    props: {
      showFlag: {
        type: Boolean,
        default() {
          return false
        }
      },
      // 订单ids
      thirdOrderIds: {
        type: Array,
        default() {
          return []
        }
      }
    },
    watch: {
      showFlag(val) {
        if (val) {
          this.init()
        }
      }
    },
    computed: {
      changeCount() {
        return this.subOrderList.filter(item => item.changeFlag).length
      }
    },
    data() {
      return {
        thirdOrderList: [],
        subOrderList: [],
        selectSkuVisible: false,
        // 选中行
        selectedRow: null,
        multipleSelection: [],
        listLoading: true
      }
    },
    // 初始化页面
    created() {
      this.init()
    },
    methods: {
      // 初始化
      init() {
        const originData = this.$options.data()
        this.listLoading = originData.listLoading
        this.thirdOrderList = originData.thirdOrderList
        this.subOrderList = originData.subOrderList
        this.selectSkuVisible = originData.selectSkuVisible
        this.selectedRow = originData.selectedRow
        this.multipleSelection = originData.multipleSelection
        this.$nextTick(() => {
          this.$refs.table.clearFilter()
        })
        this.initList()
      },
      initList() {
        this.listLoading = true
        const form = {
          thirdOrderIds: this.thirdOrderIds
        }
        checkAndGetChangeList(form).then(response => {
          this.listLoading = false
          const data = response.data
          if (!data.thirdOrderList || !data.subOrderList) {
            this.$alert('无符合条件（待发货且未生成）的订单，请重新选择', '提示', {
              confirmButtonText: '确定',
              type: 'warning',
              callback: action => {
                this.doClose()
              }
            })
            return
          }
          this.thirdOrderList = data.thirdOrderList
          this.subOrderList = data.subOrderList
        })
      },
      // 筛选事件
      filterTag(value, row) {
        return value ? row.changeFlag : !row.changeFlag
      },
      // 选择事件
      doSelect(row) {
        this.selectedRow = row
        this.selectSkuVisible = true
      },
      // 批量选择事件
      doBatchSelect() {
        this.selectSkuVisible = true
      },
      // 商品选择回调事件
      doCallbackSelect(goods) {
        if (this.selectedRow) {
          this.$set(this.selectedRow, 'changeFlag', true)
          this.$set(this.selectedRow, 'goodsId', goods.goodsId)
          this.$set(this.selectedRow, 'skuId', goods.skuId)
          this.$set(this.selectedRow, 'goodsTitle', goods.title)
          this.$set(this.selectedRow, 'skuDetail', goods.skuDetail)
          this.selectedRow = ''
        } else {
          this.multipleSelection.forEach(item => {
            this.$set(item, 'changeFlag', true)
            this.$set(item, 'goodsId', goods.goodsId)
            this.$set(item, 'skuId', goods.skuId)
            this.$set(item, 'goodsTitle', goods.title)
            this.$set(item, 'skuDetail', goods.skuDetail)
          })
        }
        this.selectSkuVisible = false
      },
      // 清空事件
      doClear(row) {
        if (row.changeFlag) {
          this.$set(row, 'changeFlag', false)
          this.$set(row, 'goodsId', null)
          this.$set(row, 'skuId', null)
          this.$set(row, 'goodsTitle', null)
          this.$set(row, 'skuDetail', null)
        }
      },
      // 确定事件
      doConfirm() {
        if (this.changeCount <= 0) {
          this.$message({ type: 'warning', message: '请修改商品' })
          return
        }
        const params = {
          subOrderList: this.subOrderList.filter(item => item.changeFlag)
        }
        this.$bus.$emit('asyncHandle', '300005', params, () => {
          this.$message({ type: 'success', message: '修改成功' })
          this.$emit('callback', true)
        })
      },
      // 关闭事件
      doClose() {
        this.$emit('callback', false)
      },
      // 勾选事件
      handleSelectionChange(val) {
        this.multipleSelection = val
      }
    }
  }
</script>

<style lang="less" scoped>
  .el-divider {
    height: auto;
  }
  .first-line {
    border-top: 1px solid #EBEEF5;
    padding-top: 5px;
  }
  /deep/ .el-table__column-filter-trigger i {
    font-size: 16px;
    font-weight: bold;
  }
</style>
